import React from 'react'
import {Card, Table, Button, Modal, message, Space} from "antd"
import {ExclamationCircleOutlined} from '@ant-design/icons'
import Add from './components/add'
import Authz from "./components/authz";
import {RoleApi} from '@/api/index'

export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            title: "角色列表",
            pageRequest: {
                page: 0,
                pageSize: 10,
            },
            total: 0,
            list: [],
            code: null,
            addModalVisible: false,
            authzModalVisible: false
        }
    }

    showAddModal() {
        this.setState({
            addModalVisible: true
        })
    }

    addModalClose() {
        this.getRoleList();
        this.setState({
            addModalVisible: false
        });
    }

    authzModalClose() {
        this.setState({
            authzModalVisible: false
        });
    }


    async delRole(code) {
        let that = this
        Modal.confirm({
            title: '确认删除角色?',
            icon: <ExclamationCircleOutlined/>,
            content: '删除以后无法恢复',
            okText: '是',
            cancelText: '否',
            onOk() {
                let params = {"code": code}
                RoleApi.delRole(params).then(ret => {
                    if (ret && ret.code === 200) {
                        that.getRoleList()
                        message.success("删除成功")
                    } else {
                        message.success(ret.message || '操作失败')
                    }
                })
            }
        })
    }

    async authz(code) {
        this.setState({
            authzModalVisible: true,
            code: code
        })
    }

    async getRoleList() {
        let params = {...this.state.pageRequest}
        let ret = await RoleApi.rolelist(params)
        if (ret && ret.code === 200) {
            this.setState({
                list: ret.data.content || [],
                total: ret.data.totalElements
            })
        }
    }

    componentDidMount() {
        this.getRoleList()
    }

    render() {

        const columns = [
            {
                title: '名称',
                dataIndex: 'name',
                key: 'name',
                width: '20%',
            },
            {
                title: '编码',
                dataIndex: 'code',
                key: 'code',
                width: '20%',
            },
            {
                title: '内置角色',
                dataIndex: 'isEdit',
                key: 'isEdit',
                width: '20%',
                render: (text, record) => (text === 0 ? "是" : "否")
            },
            {
                title: '状态',
                dataIndex: 'isNormal',
                key: 'isNormal',
                width: '20%',
                render: (text, record) => (text === 1 ? "正常" : "删除")
            },
            {
                title: '操作',
                dataIndex: 'action',
                key: 'action',
                render: (text, record) => {
                    let disable = (record.isNormal === 0 || record.isEdit === 0)
                    return (
                        <Space>
                            <Button type="link" disabled={disable} onClick={() => this.delRole(record.code)}>删除</Button>
                            <Button type="link" disabled={disable} onClick={() => this.authz(record.code)}>授权</Button>
                        </Space>
                    )
                }
            },
        ];

        const {total, pageRequest, code} = this.state

        const pagination = {
            onChange: (page, pageSize) => {
                this.setState({
                    pageRequest: {
                        page: page - 1,
                        pageSize: pageSize
                    }
                }, () => {
                    this.getRoleList()
                })
            },
            pageSize: pageRequest.pageSize,
            total: total
        }

        return (
            <Card title={this.state.title} extra={<Button type="primary" ghost onClick={() => {
                this.showAddModal()
            }}>添加</Button>}>
                <Table columns={columns} dataSource={this.state.list} pagination={pagination}/>
                <Add modalVisible={this.state.addModalVisible} onClose={this.addModalClose.bind(this)}></Add>
                <Authz modalVisible={this.state.authzModalVisible} code={code} onClose={this.authzModalClose.bind(this)}/>
            </Card>
        );
    }
}
